<template>
  <view class="index">
    <view class="center">
      <view class="ind_from">
        <view class="row">
          <view class="label">退休省份</view>
          <view class="value">
            <picker mode="selector" :range="cityList" @change="onCityChange" :value="formData.cityIndex">
              <view class="picker">
                {{ cityList[formData.cityIndex] }}
              </view>
            </picker>
          </view>
        </view>
        <view class="row">
          <view class="label">现在年龄(岁)</view>
          <view class="value">
            <input
              class="input"
              v-model="formData.age"
              type="number"
              placeholder="请输入年龄"
            />
          </view>
        </view>
        <view class="row">
          <view class="label">现已参保(年)</view>
          <view class="value">
            <input
              class="input"
              v-model="formData.insuredYears"
              type="number"
              placeholder="请输入现已参保"
              @input="validateInsuredYears"
            />
          </view>
        </view>
        <view class="row">
          <view class="label">缴纳基数（元/月）</view>
          <view class="value">
            <input
              class="input"
              v-model="formData.paymentBase"
              type="digit"
              placeholder="请输入缴纳基数"
            />
          </view>
        </view>
        <view class="row">
          <view class="label">退休身份</view>
          <view class="radio-group">
            <view
              v-for="(item, idx) in identityList"
              :key="idx"
              :class="['custom-radio', formData.identity === item ? 'active' : '']"
              @click="formData.identity = item"
            >
              {{ item }}
            </view>
          </view>
        </view>
        <view class="row">
          <view class="label">养老余额（元）</view>
          <view class="value">
            <input
              class="input"
              v-model="formData.pensionBalance"
              type="digit"
              placeholder="请输入养老余额"
            />
          </view>
        </view>
      </view>
      <view class="btn" @click="submit">计算结果</view>
      <view class="bottom_btn_group">
        <button class="addShortcut" open-type="addShortcut" :bindaddshortcut="eventHandler">添加到桌面</button>
        <button class="share" open-type="share">分享</button>
      </view>
      <view class="pub_ad_banner">
        <!-- #ifdef MP-TOUTIAO -->
        <ad
          :unit-id="adBannerIdDouyin"
          :ad-intervals="30"
          :fixed="false"
          type="banner"
          scale="100"
        />
        <!-- #endif -->
        <!-- #ifdef MP-KUAISHOU -->
        <ad :type="100011054" :unit-id="adBannerIdKuaishou"></ad>
        <!-- #endif -->
      </view>
      <view v-if="showResult" class="ind_from result-block">
        <view class="result-title">计算结果</view>
        <view class="result-summary">
          <view class="summary-item">
            <text class="label">退休年龄</text>
            <text class="value">{{ getRetireAge() }}岁</text>
          </view>
          <view class="summary-item">
            <text class="label">缴费年限</text>
            <text class="value">{{ getTotalPaymentYears() }}年</text>
          </view>
        </view>
        <view class="result-chart">
          <view class="chart-title">养老金构成</view>
          <view class="chart-content">
            <view class="chart-bar">
              <view class="bar-item" :style="{ width: getBasePensionPercentage() + '%' }">
                <text class="bar-label">基础养老金</text>
                <text class="bar-value">{{ formatNumber(result.basePension) }}元</text>
              </view>
              <view class="bar-item" :style="{ width: getIndividualPensionPercentage() + '%' }">
                <text class="bar-label">个人账户养老金</text>
                <text class="bar-value">{{ formatNumber(result.individualPension) }}元</text>
              </view>
            </view>
          </view>
        </view>
        <view class="row result-item">
          <view class="label">基础养老金</view>
          <view class="value">
            <text class="strong">{{ formatNumber(result.basePension) }}</text>元/月
          </view>
        </view>
        <view class="row result-item">
          <view class="label">个人账户养老金</view>
          <view class="value">
            <text class="strong">{{ formatNumber(result.individualPension) }}</text>元/月
          </view>
        </view>
        <view class="row result-item total">
          <view class="label">预估退休工资</view>
          <view class="value">
            <text class="strong">{{ formatNumber(result.totalPension) }}</text>元/月
          </view>
        </view>
        <view class="result-analysis">
          <view class="analysis-title">分析说明</view>
          <view class="analysis-content">
            <view class="analysis-item">
              <text class="dot"></text>
              <text>您的退休工资相当于当地平均工资的{{ getSalaryRatio() }}%</text>
            </view>
            <view class="analysis-item">
              <text class="dot"></text>
              <text>基础养老金占比{{ getBasePensionPercentage() }}%，个人账户养老金占比{{ getIndividualPensionPercentage() }}%</text>
            </view>
            <view class="analysis-item">
              <text class="dot"></text>
              <text>距离退休还有{{ getRemainingYears() }}年，建议继续缴纳社保以提升退休待遇</text>
            </view>
          </view>
        </view>
      </view>
      <view class="sub_text">
        <view>养老金计算公式</view>
        <view>养老金=基础养老金+个人账户养老金</view>
        <view>基础养老金=（全省上年度在岗职工月平均工资+本人指数化月平均缴费工资）÷2×缴费年限×1%</view>
        <view>本人指数化月平均缴费工资=全省上年度在岗职工月平均工资×本人平均缴费指数</view>
        <view>个人账户养老金=个人账户储存额÷计发月数</view>
      </view>
    </view>
  </view>
</template>

<script>
import {
  showAdConfirmModal,
  adVideoShow,
  adBannerIdDouyin,
  adBannerIdKuaishou,
} from "@/common/ad";
export default {
  data() {
    return {
      adBannerIdDouyin: adBannerIdDouyin,
      adBannerIdKuaishou: adBannerIdKuaishou,
      cityList: [
        '北京', '天津', '河北', '山西', '内蒙古', '辽宁', '吉林', '黑龙江',
        '上海', '江苏', '浙江', '安徽', '福建', '江西', '山东',
        '河南', '湖北', '湖南', '广东', '广西', '海南',
        '重庆', '四川', '贵州', '云南', '西藏',
        '陕西', '甘肃', '青海', '宁夏', '新疆', '香港', '澳门', '台湾'
      ],
      identityList: ['男同志', '女干部', '女工人'],
      showResult: false,
      isUnlock: false,
      formData: {
        cityIndex: 0, // 退休城市
        age: "30",
        insuredYears: "5",
        paymentBase: "",
        pensionBalance: "",
        identity: '男同志', // 退休身份
      },
      result: {
        basePension: 0,
        individualPension: 0,
        totalPension: 0,
      },
    };
  },
  methods: {
    eventHandler(e) {
      if (e.detail.errNo) {
        this.global.toast("添加到桌面失败");
      } else {
        this.global.toast("添加到桌面成功");
      }
    },
    onCityChange(e) {
      this.formData.cityIndex = e.detail.value;
    },
    validateAge(e) {
      const value = e.detail.value;
      if (value < 16) {
        this.formData.age = "16";
        this.global.toast("年龄不能小于16岁");
      } else if (value > 100) {
        this.formData.age = "100";
        this.global.toast("年龄不能大于100岁");
      }
    },
    validateInsuredYears(e) {
      const value = e.detail.value;
      if (value < 0) {
        this.formData.insuredYears = "0";
        this.global.toast("参保年限不能为负数");
      }
    },
    formatPaymentBase(e) {
      const value = e.detail.value;
      if (value && !isNaN(value)) {
        this.formData.paymentBase = Number(value).toFixed(2);
      }
    },
    formatPensionBalance(e) {
      const value = e.detail.value;
      if (value && !isNaN(value)) {
        this.formData.pensionBalance = Number(value).toFixed(2);
      }
    },
    formatNumber(num) {
      return num.toLocaleString('zh-CN', {
        minimumFractionDigits: 2,
        maximumFractionDigits: 2
      });
    },
    calculate() {
      let retireAge = 60;
      if (this.formData.identity === '女干部') retireAge = 55;
      if (this.formData.identity === '女工人') retireAge = 50;
      let remainingYears = Math.max(retireAge - this.formData.age, 0);
      let totalPaymentYears =
        Number(this.formData.insuredYears) + remainingYears;
      // 基础养老金
      let basePension =
        Number(this.formData.paymentBase) * totalPaymentYears * 0.01;
      // 个人账户养老金
      let futureContribution =
        Number(this.formData.paymentBase) * 0.08 * 12 * remainingYears;
      let individualAccount =
        Number(this.formData.pensionBalance) + futureContribution;
      let individualPension = individualAccount / 139;
      // 预估退休工资
      let totalPension = basePension + individualPension;
      // 赋值
      this.result.basePension = basePension;
      this.result.individualPension = individualPension;
      this.result.totalPension = totalPension;
      this.showResult = true;
      this.isUnlock = true;
    },
    getResult() {
      this.calculate();
    },
    submit() {
      if (this.formData.age == "") {
        this.global.toast("请输入年龄");
        return;
      }
      if (this.formData.insuredYears == "") {
        this.global.toast("请输入已参保年限");
        return;
      }
      if (this.formData.paymentBase == "") {
        this.global.toast("请输入缴纳基数");
        return;
      }
      if (this.formData.pensionBalance == "") {
        this.global.toast("请输入养老余额");
        return;
      }
      if (!this.isUnlock) {
        showAdConfirmModal(() => {
          try {
            adVideoShow(() => {
              this.getResult();
            });
          } catch (error) {
            this.getResult();
          }
        });
      } else {
        this.getResult();
      }
    },
    getRetireAge() {
      if (this.formData.identity === '女干部') return 55;
      if (this.formData.identity === '女工人') return 50;
      return 60;
    },
    getTotalPaymentYears() {
      const retireAge = this.getRetireAge();
      const remainingYears = Math.max(retireAge - this.formData.age, 0);
      return Number(this.formData.insuredYears) + remainingYears;
    },
    getBasePensionPercentage() {
      if (this.result.totalPension === 0) return 0;
      return Math.min(Math.round((this.result.basePension / this.result.totalPension) * 100), 100);
    },
    getIndividualPensionPercentage() {
      if (this.result.totalPension === 0) return 0;
      return Math.min(Math.round((this.result.individualPension / this.result.totalPension) * 100), 100);
    },
    getSalaryRatio() {
      // 假设当地平均工资为5000元
      const avgSalary = 5000;
      return Math.round((this.result.totalPension / avgSalary) * 100);
    },
    getRemainingYears() {
      const retireAge = this.getRetireAge();
      return Math.max(retireAge - this.formData.age, 0);
    },
  },
};
</script>

<style scoped lang="scss">
.banner {
  display: block;
  width: 100%;
}
.input {
  width: 100%;
  border: 1.5px solid #e0e0e0;
  border-radius: 24rpx;
  padding: 0 20rpx;
  font-size: 32rpx;
  background: #fff;
  color: #222;
  box-sizing: border-box;
  margin-bottom: 0;
  height: 60rpx;
  transition: border-color 0.3s, box-shadow 0.3s;
  &::placeholder {
    color: #c0c0c0;
    font-size: 30rpx;
  }
  &:focus {
    border-color: #ff5a1f;
    box-shadow: 0 0 12rpx rgba(255,90,31,0.10);
    background: #fffdfa;
  }
}
.btn {
  margin-top: 48rpx;
  background: linear-gradient(90deg, #ff5a1f 0%, #ff2d51 100%);
  color: #fff;
  text-align: center;
  padding: 22rpx 0;
  border-radius: 32rpx;
  font-size: 36rpx;
  font-weight: bold;
  box-shadow: 0 4rpx 16rpx rgba(255,93,47,0.10);
  letter-spacing: 2rpx;
  transition: background 0.2s;
}
.radio-group {
  display: flex;
  justify-content: space-between;
  margin-top: 8rpx;
}
.custom-radio {
  flex: 1;
  text-align: center;
  padding: 18rpx 10rpx;
  margin-right: 12rpx;
  border-radius: 16rpx;
  border: 2rpx solid #db0000;
  color: #db0000;
  background: #fff;
  font-size: 30rpx;
  font-weight: 500;
  transition: all 0.2s;
  &:last-child {
    margin-right: 0;
  }
  &.active {
    background: #db0000;
    color: #fff;
    font-weight: bold;
    border-color: #db0000;
    box-shadow: 0 2rpx 8rpx rgba(219,0,0,0.08);
  }
}
.ind_from {
  background: #fff;
  margin-top: 20rpx;
  border: 2rpx solid #f0f0f0;
  border-radius: 20rpx;
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.03);
  .row {
    padding: 18rpx 20rpx;
    border-bottom: 1px solid #f5f5f5;
    margin-bottom: 16rpx;
    &:last-child {
      border-bottom: 0;
      margin-bottom: 0;
    }
    .label {
      font-size: 28rpx;
      color: #b39569;
      margin-bottom: 5px;
      width: 250rpx;
    }
    .value {
      font-size: 32rpx;
      color: #333;
    }
  }
}
.result-block {
  margin-top: 30rpx;
  background: #fff;
  border: 2rpx solid #db0000;
  border-radius: 16rpx;
  box-shadow: 0 4rpx 18rpx rgba(219,0,0,0.08);
  .result-title {
    text-align: center;
    font-size: 36rpx;
    font-weight: bold;
    color: #db0000;
    padding: 20rpx 0;
    border-bottom: 1px solid #f5f5f5;
  }
  .result-summary {
    display: flex;
    justify-content: space-around;
    padding: 20rpx;
    background: #fff9f9;
    border-radius: 12rpx;
    margin: 20rpx;
    .summary-item {
      text-align: center;
      .label {
        font-size: 26rpx;
        color: #666;
        display: block;
        margin-bottom: 8rpx;
      }
      .value {
        font-size: 36rpx;
        color: #db0000;
        font-weight: bold;
      }
    }
  }
  .result-chart {
    margin: 20rpx;
    padding: 20rpx;
    background: #fff;
    border-radius: 12rpx;
    .chart-title {
      font-size: 28rpx;
      color: #666;
      margin-bottom: 20rpx;
    }
    .chart-content {
      .chart-bar {
        display: flex;
        height: 80rpx;
        border-radius: 40rpx;
        overflow: hidden;
        .bar-item {
          min-width: 80rpx;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          padding: 0 20rpx;
          color: #fff;
          transition: width 0.3s;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          &:first-child {
            background: linear-gradient(90deg, #ff5a1f 0%, #ff2d51 100%);
          }
          &:last-child {
            background: linear-gradient(90deg, #ff2d51 0%, #ff5a1f 100%);
          }
          .bar-label {
            font-size: 24rpx;
            margin-bottom: 4rpx;
          }
          .bar-value {
            font-size: 22rpx;
            opacity: 0.9;
          }
        }
      }
    }
  }
  .result-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24rpx 20rpx;
    .label {
      font-size: 30rpx;
      color: #666;
      margin-bottom: 0;
    }
    .value {
      font-size: 34rpx;
      .strong {
        color: #db0000;
        font-weight: bold;
        font-size: 40rpx;
      }
    }
    &.total {
      background: #fff9f9;
      .label {
        color: #db0000;
        font-weight: bold;
      }
    }
  }
  .result-analysis {
    margin: 20rpx;
    padding: 20rpx;
    background: #f9f5ef;
    border-radius: 12rpx;
    .analysis-title {
      font-size: 28rpx;
      color: #db0000;
      font-weight: bold;
      margin-bottom: 16rpx;
    }
    .analysis-content {
      .analysis-item {
        display: flex;
        align-items: center;
        margin-bottom: 12rpx;
        font-size: 26rpx;
        color: #666;
        .dot {
          width: 8rpx;
          height: 8rpx;
          background: #db0000;
          border-radius: 50%;
          margin-right: 12rpx;
        }
      }
    }
  }
}
.sub_text {
  text-align: left;
  padding: 24rpx 20rpx 10rpx 20rpx;
  font-size: 26rpx;
  color: #666;
  background: #f9f5ef;
  border-radius: 14rpx;
  margin-top: 30rpx;
  border: 2rpx dashed #ffe58f;
}
.pub_ad_banner {
  margin-top: 30rpx;
}
</style>